<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动画中的钩子函数</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="app"></div>
</body>
<style>
    @keyframes comein{
        from{
            transform: translateX(-100px);
        }
        to{
            transform: translateX(0px);
        }
    }
    @keyframes comeout {
        from{
            transform: translateX(0px);
        }
        to{
            transform: translateX(-100px);
        }
    }
    .v-enter-from, .v-leave-to{
        opacity: 0;
    }
    .v-leave-from, .v-enter-to{
        opacity: 1;
    }
    .v-enter-active{
        animation: comein 3s;
        transition: opacity 3s ease-in;
    }
    .v-leave-active{
        animation: comeout 3s;
        transition: opacity 3s ease-out;
    }
</style>

<script>
    const app = Vue.createApp({
        data(){
            return{
                isshow: true
            }
        },
        methods:{
            guodu(){
                this.isshow = !this.isshow
            },
            beforeenterclick(element){
                element.style.color="red"
            },
            enterclick(element, done){
                // enter钩子中的done进行通知它动画执行结束
                const colorupdate = setInterval(()=>{
                    const color = element.style.color;
                    if(color=='red'){
                        element.style.color = 'green'
                    }
                    else
                    {
                        element.style.color = 'red'
                    }
                },500)
                // 使切换颜色的动画停下来
                setTimeout(()=>{
                    clearInterval(colorupdate)
                    done()
                },3000)
            },
            afterenterclick(){
                alert('动画结束')
            }
        },
        template:`
        <transition 
        @before-enter="beforeenterclick"
        @enter="enterclick"
        @after-enter="afterenterclick"

        mode="out-in"
        appear
        >
            <div v-if="isshow">第一个</div>
            <div v-else>第二个</div>
        </transition>
        <button @click="guodu()">按钮</button>`
    })
    app.mount("#app")
</script>
</html>